<template>
    <div class="container">
        <div class="content">
            <div class="title">躺猪网后台管理系统</div>
            <!-- 表单 -->
            <Form ref="loginForm" :model="loginForm" :rules="ruleInline" inline>
                <FormItem prop="user">
                    <Input type="text" clearable v-model="loginForm.username" placeholder="用户名">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" clearable v-model="loginForm.password" placeholder="密码">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="code">
                    <Input v-model="loginForm.code" placeholder="验证码">
                       <Icon type="ios-key" slot="prepend" />
                    </Input>
                    <div class="code-bd">
                        <div class="rememberMe">
                            <Checkbox @on-change="changeRemberme" v-model="loginForm.rememberMe">记住密码</Checkbox>
                        </div>
                        <div class="code-img">
                            <img @click="getCodeImg" :src="codeUrl" alt="">
                        </div>
                    </div>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('loginForm')">登录</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
import {getCode,login } from '@/api/login'
import {mapActions} from 'vuex'
    export default {
        data () {
            return {
                // Sg18670071788
                // 表单参数
                loginForm: {
                    username: "admin",
                    password: "Sg18670071788",
                    rememberMe: false,
                    code: "",
                    uuid: ""
                },
                // 验证码
                codeUrl:"",
                // 表单验证规则
                ruleInline: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                     code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                }
            }
        },
        created(){
            // 获取验证码
            this.getCodeImg()
        },
        methods: {
            ...mapActions(["SaveUsertoken"]),
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // 验证通过，则去登录
                        this.info()
                        // 存入Vuex
                    } else {
                        this.$Message.error('登录失败');
                    }
                })
            },
            // 获取验证码
            getCodeImg(){
                getCode().then(res=>{
                    console.log(res)
                    this.codeUrl = "data:image/gif;base64," + res.img;
                    this.loginForm.uuid = res.uuid;
                })
            },
            // 登录
            info(){
                login(this.loginForm).then(res=>{
                    console.log(res)
                    if(res.token){
                        this.$Message.success({
                            content: '登录成功',
                            duration: 2,
                        })
                        // 储存token
                        this.SaveUsertoken(res.token)
                        this.$router.push({path:"/allmessage"})
                    }else{
                        // 登录失败清除表单验证码，并重新加载验证码
                        // this.loginForm.code=""
                        this.getCodeImg()
                    }
                    
                })
            },
            // 记住密码
            changeRemberme(value){
                console.log(value)
                this.loginForm.rememberMe=value
            }
        }
    }
</script>
<style lang="less" scoped>
.container{
    position: relative;
    background-color: #8db6e4;
    height: 667px;
    .content{
        position: absolute;
        transform: translate(-50%, -50%);
        width: 90%;
        top: 50%;
        background-color: #fff;
        padding: 0.3rem 0;
        left: 50%;
        border-radius: 10px;
    }
}
form{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.ivu-form-item{
    width: 80%;
}
.ivu-input-group{
    height: 0.75rem;
}
/deep/.ivu-input-group .ivu-input{
        height: 0.75rem;
    }
/deep/.ivu-input-group-prepend{
    width: 0.8rem;
}
/deep/.ivu-icon-ios-person-outline:before{
    font-size: 0.32rem;
}
.title{
    display: flex;
    justify-content: center;
    font-weight: 600;
    font-size: 0.38rem;
    margin: 0.2rem 0;
}
/deep/.ivu-form-item-content{
    button{
        width: 100%;
    }
}
.code-img{
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}
.code-bd{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>